window.onload=function() {
    var list = document.getElementById('list'); //获取图片元素的父级元素，并命名为list
    var prev = document.getElementById('prev'); //获取左箭头
    var next = document.getElementById('next'); //获取右箭头
    function animate(offset) { //设置一个名为animate的函数，该函数接收一个参数

        var newleft = parseInt(list.style.left) + offset; //获取图片的父级元素的左侧的定位值，并加上传入的参数offset

        if (newleft < -2660) { //图片的父级div在移动的过程中，显示的图片的定位都是负值，如图3所示

            list.style.left = -380 + 'px'; //但图片显示到五张图片上的最后一张时，自动跳转到第一张图片
        } else if (newleft > -380) { //当在第一张图片上单击向左的按钮时，自动跳转到最后一张
            list.style.left = -2660 + 'px';
        } else {
            list.style.left = newleft + 'px';
        }
    }


    prev.onclick=function(){ //向左的单击事件

        animate(380);
    }


    next.onclick=function(){ //向右的单击事件
        animate(-380)
    }


    var timer;
    function play(){
        timer=setInterval(function(){ //设置间歇调用，时间间隔为1500毫秒
            next.onclick() //此处是自动向右切换，如果想设置为向左切换，把next换为prev即可
        },10)
    }
    play(); //实现自动调用


    var container=document.getElementById('container'); //获取最外层的容器元素
    function stop(){
        clearInterval(timer);
    }
    container.onmouseover=stop; //当鼠标移动到上方时，清除定时器
    container.onmouseout=play; //当鼠标从容器元素上方移走时，进行自动轮播


    var buttons=document.getElementById('buttons').getElementsByTagName('span');
    var index=1;


    function buttonsShow(){
        for(var i=0;i<buttons.length;i++){
            if(buttons[i].className=='on'){ //如果某个span设置了class='on'，那么就将其的class属性设置为空
                buttons[i].className='';
            }
        }
//数组从0开始，故index需要-1
        buttons[index-1].className='on'; //设置下一个span的class属性值为'on'，即是高亮显示
    }


    prev.onclick=function(){
        index-=1;
        if(index<1){
            index=8;
        }
        buttonsShow();
        animate(1);
    }
    next.onclick=function(){
//由于上面定时器的作用，index会一直递增下去，而元圆点只有5个，因此需要先做出判断
        index+=1;
        if(index>8){
            index=1;
        }
        buttonsShow();
        animate(-1);
    }
}
